@use "sass:color";
@use "sass:math";
@import "../css/variables";

.button {
  box-shadow: $button-box-shadow;
  cursor: pointer;
  border-radius: $border-radius;
  padding: math.div($spacer, 2) $spacer * 1.4 math.div($spacer, 1.75) $spacer * 1.3;
  background-color: $gray-600;
  transition: $button-background-transition;
  color: #fff;
  display: inline-block;
  vertical-align: middle;

  &:hover {
    color: #fff;
    text-decoration: none;
    background-color: color.adjust($gray-600, $lightness: -10%);
  }

  &.primary {
    background-color: $primary;

    &:hover {
      background-color: color.adjust($primary, $lightness: -10%);
    }
  }

  .icon {
    display: inline-block;

    :global(svg) {
      margin-bottom: 3px;
      margin-right: 2px;
      height: 1.1rem;
    }
  }
}
